<script setup lang="ts">
import type { Rule } from 'ant-design-vue/es/form'
import { nameValidator } from '~/utils/form-validator.ts'
import type { MenuResp } from '~/api/setting/model/menu.ts'
import { queryMenuTreeListApi } from '~/api/setting/menu.ts'
import { bindApiRelationMenu } from '~/api/setting/api.ts'
import type { ApiReq } from '~/api/setting/model/api.ts'

const props = defineProps({
  apiData: Object,
  menuId: String,
  optType: {
    type: String,
    default: 'create',
  },
})

const emits = defineEmits(['onSaveSuccess'])

const message = useMessage()

const apiReq = ref<ApiReq>({
  menuId: props.menuId,
  id: props?.apiData?.id,
  apiTitle: props?.apiData?.apiTitle,
  apiUrl: props?.apiData?.apiUrl,
})

const menuApiCreateFormRef = ref()
const rules: Record<string, Rule[]> = {
  menuId: [
    { required: true, message: '请选择菜单' },
  ],
  apiTitle: [
    { required: true, message: '请输入接口名称' },
    { validator: nameValidator, trigger: 'blur' },
  ],
  apiUrl: [
    { required: true, message: '请输入接口Path' },
  ],
}

const dataSource = shallowRef<MenuResp[]>([])
const loading = shallowRef(false)

/**
 * 初始化菜单
 */
async function init() {
  if (loading.value) {
    return
  }
  loading.value = true
  try {
    const rootMenu: MenuResp[] = [{
      id: '0',
      menuTitle: '根目录',
    }]
    rootMenu[0].children = await queryMenuTreeListApi()
    dataSource.value = rootMenu
  } catch (e) {
    console.log(e)
  } finally {
    loading.value = false
  }
}

const confirmLoading = shallowRef(false)

/**
 *  编辑菜单
 */
async function onBindMenuApi() {
  menuApiCreateFormRef.value
    .validate()
    .then(() => {
      confirmLoading.value = true
      bindApiRelationMenu(apiReq.value).then((response) => {
        if (response) {
          message.success('绑定成功')
          emits('onSaveSuccess', 'bind')
        }
      }).finally(() => {
        confirmLoading.value = false
        close()
      })
    })
    .catch(() => {
      console.log('menuCreateFormRef::error')
    })
}

onMounted(() => {
  init()
})
</script>

<template>
  <a-modal title="编辑菜单" width="800px" :confirm-loading="confirmLoading" @ok="onBindMenuApi">
    <a-space direction="vertical" size="large" class="w-full">
      <a-form
        ref="menuApiCreateFormRef"
        :model="apiReq"
        :rules="rules"
        :label-col="{ span: 6 }"
        :wrapper-col="{ span: 14 }"
        layout="horizontal"
      >
        <a-form-item name="menuId" label="所属菜单">
          <a-tree-select
            v-model:value="apiReq.menuId"
            placeholder="请输入菜单名称"
            :tree-data="dataSource"
            :field-names="{ value: 'id', label: 'menuTitle' }"
            tree-node-filter-prop="label"
            tree-default-expand-all
            allow-clear
          />
        </a-form-item>
        <a-form-item name="apiTitle" label="接口名称">
          <a-input v-model:value="apiReq.apiTitle" placeholder="请输入接口名称" allow-clear disabled />
        </a-form-item>
        <a-form-item name="note" label="备注">
          <a-textarea
            v-model:value="apiReq.apiUrl"
            :rows="4"
            placeholder="请输入备注"
            allow-clear
            disabled
          />
        </a-form-item>
      </a-form>
    </a-space>
  </a-modal>
</template>

<style lang="less" scoped>
.avatar-uploader {
  .ant-upload {
    width: 128px;
    height: 128px;
  }
}

.avatar-uploader-img {
  width: 100px;
  height: 100px;
  border-radius: 8px;
}

.ant-upload-select-picture-card i {
  font-size: 32px;
  color: #999;
}

.ant-upload-select-picture-card .ant-upload-text {
  margin-top: 8px;
  color: #666;
}
</style>
